<template>
  <div class="teacher-manage-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><User /></el-icon>
          <div class="header-text">
            <h2>讲师管理</h2>
            <p>管理平台讲师资源</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="showDialog = true">
            <el-icon><Plus /></el-icon>
            添加讲师
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 讲师统计 -->
    <div class="stats-row">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><UserFilled /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.total }}</div>
            <div class="stat-label">全部讲师</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#67C23A"><Star /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.featured }}</div>
            <div class="stat-label">金牌讲师</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#E6A23C"><Reading /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.courses }}</div>
            <div class="stat-label">总课程数</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#F56C6C"><TrendCharts /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.avgRating }}</div>
            <div class="stat-label">平均评分</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 讲师列表 -->
    <el-card shadow="never">
      <el-table :data="tableData" stripe>
        <el-table-column type="selection" width="55" />
        <el-table-column label="讲师信息" min-width="250">
          <template #default="{ row }">
            <div class="teacher-info">
              <el-avatar :size="50" :src="row.avatar">{{ row.name[0] }}</el-avatar>
              <div class="teacher-text">
                <div class="teacher-name">
                  {{ row.name }}
                  <el-tag v-if="row.isFeatured" type="warning" size="small" effect="dark">
                    <el-icon><StarFilled /></el-icon>
                    金牌
                  </el-tag>
                </div>
                <div class="teacher-title">{{ row.title }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="specialty" label="专业领域" width="150" />
        <el-table-column prop="coursesCount" label="授课数" width="100" />
        <el-table-column prop="studentsCount" label="学员数" width="100" />
        <el-table-column prop="rating" label="评分" width="150">
          <template #default="{ row }">
            <el-rate v-model="row.rating" disabled show-score :max="5" />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'info'" size="small">
              {{ row.status === 'active' ? '在职' : '离职' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">
              <el-icon><View /></el-icon>
              查看
            </el-button>
            <el-button link type="success" @click="handleEdit(row)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button link type="warning" @click="handleToggleFeatured(row)">
              <el-icon><Star /></el-icon>
              {{ row.isFeatured ? '取消金牌' : '设为金牌' }}
            </el-button>
            <el-button link type="danger" @click="handleDelete(row)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新建/编辑讲师对话框 -->
    <el-dialog
      v-model="showDialog"
      :title="dialogTitle"
      width="700px"
      destroy-on-close
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="讲师头像">
          <el-upload
            class="avatar-uploader"
            :auto-upload="false"
            :show-file-list="false"
            accept="image/*"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar" />
            <div v-else class="avatar-placeholder">
              <el-icon><Plus /></el-icon>
            </div>
          </el-upload>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="讲师姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职称" prop="title">
              <el-input v-model="form.title" placeholder="如：高级工程师" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="专业领域" prop="specialty">
              <el-input v-model="form.specialty" placeholder="如：前端开发" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="contact">
              <el-input v-model="form.contact" placeholder="手机或邮箱" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="讲师简介" prop="bio">
          <el-input v-model="form.bio" type="textarea" :rows="4" placeholder="请输入讲师简介" />
        </el-form-item>
        <el-form-item label="教学经验" prop="experience">
          <el-input v-model="form.experience" type="textarea" :rows="3" placeholder="请输入教学经验" />
        </el-form-item>
        <el-form-item label="金牌讲师">
          <el-switch v-model="form.isFeatured" active-text="是" inactive-text="否" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </template>
    </el-dialog>

    <!-- 讲师详情对话框 -->
    <el-dialog v-model="showDetailDialog" title="讲师详情" width="600px">
      <div v-if="currentTeacher" class="teacher-detail">
        <div class="detail-header">
          <el-avatar :size="100" :src="currentTeacher.avatar">{{ currentTeacher.name[0] }}</el-avatar>
          <div class="header-info">
            <h3>{{ currentTeacher.name }}</h3>
            <p>{{ currentTeacher.title }}</p>
            <el-rate v-model="currentTeacher.rating" disabled show-score :max="5" />
          </div>
        </div>
        <el-divider />
        <el-descriptions :column="2" border>
          <el-descriptions-item label="专业领域">{{ currentTeacher.specialty }}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{ currentTeacher.contact }}</el-descriptions-item>
          <el-descriptions-item label="授课数量">{{ currentTeacher.coursesCount }}门</el-descriptions-item>
          <el-descriptions-item label="学员数量">{{ currentTeacher.studentsCount }}人</el-descriptions-item>
          <el-descriptions-item label="讲师简介" :span="2">{{ currentTeacher.bio }}</el-descriptions-item>
          <el-descriptions-item label="教学经验" :span="2">{{ currentTeacher.experience }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User, UserFilled, Star, StarFilled, Reading, TrendCharts,
  Plus, View, Edit, Delete
} from '@element-plus/icons-vue'

// 统计数据
const stats = reactive({
  total: 25,
  featured: 8,
  courses: 68,
  avgRating: 4.7
})

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: '张三',
    title: '高级前端工程师',
    specialty: '前端开发',
    avatar: '',
    coursesCount: 8,
    studentsCount: 2456,
    rating: 4.9,
    isFeatured: true,
    status: 'active',
    contact: 'zhangsan@company.com',
    bio: '10年前端开发经验，精通Vue、React等主流框架...',
    experience: '曾在多家知名互联网公司担任技术负责人...'
  },
  {
    id: 2,
    name: '李四',
    title: '资深产品经理',
    specialty: '产品管理',
    avatar: '',
    coursesCount: 5,
    studentsCount: 1523,
    rating: 4.7,
    isFeatured: true,
    status: 'active',
    contact: 'lisi@company.com',
    bio: '8年产品经验，擅长用户研究和产品设计...',
    experience: '主导过多款成功产品的设计和落地...'
  },
  {
    id: 3,
    name: '王五',
    title: '市场总监',
    specialty: '市场营销',
    avatar: '',
    coursesCount: 3,
    studentsCount: 856,
    rating: 4.5,
    isFeatured: false,
    status: 'active',
    contact: 'wangwu@company.com',
    bio: '5年市场营销经验...',
    experience: '负责过多个成功的营销campaign...'
  }
])

// 对话框
const showDialog = ref(false)
const showDetailDialog = ref(false)
const formRef = ref(null)
const currentRow = ref(null)
const currentTeacher = ref(null)

const dialogTitle = computed(() => currentRow.value ? '编辑讲师' : '添加讲师')

// 表单
const form = reactive({
  name: '',
  title: '',
  specialty: '',
  contact: '',
  avatar: '',
  bio: '',
  experience: '',
  isFeatured: false
})

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入讲师姓名', trigger: 'blur' }],
  title: [{ required: true, message: '请输入职称', trigger: 'blur' }],
  specialty: [{ required: true, message: '请输入专业领域', trigger: 'blur' }]
}

// 方法
const handleView = (row) => {
  currentTeacher.value = row
  showDetailDialog.value = true
}

const handleEdit = (row) => {
  currentRow.value = row
  Object.assign(form, {
    name: row.name,
    title: row.title,
    specialty: row.specialty,
    contact: row.contact,
    avatar: row.avatar,
    bio: row.bio,
    experience: row.experience,
    isFeatured: row.isFeatured
  })
  showDialog.value = true
}

const handleToggleFeatured = (row) => {
  row.isFeatured = !row.isFeatured
  ElMessage.success(row.isFeatured ? '已设为金牌讲师' : '已取消金牌讲师')
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该讲师吗？', '提示', {
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      tableData.value.splice(index, 1)
    }
    ElMessage.success('删除成功')
  }).catch(() => {})
}

const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('保存成功')
      showDialog.value = false
    }
  })
}
</script>

<style scoped>
.teacher-manage-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.teacher-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.teacher-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.teacher-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.teacher-title {
  font-size: 13px;
  color: #909399;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  color: #8c939d;
  border-radius: 50%;
}

.teacher-detail {
  padding: 20px 0;
}

.detail-header {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 20px;
}

.header-info h3 {
  margin: 0 0 8px 0;
  font-size: 24px;
}

.header-info p {
  margin: 0 0 12px 0;
  color: #606266;
}
</style>

